<template>
  <div>
     <el-header class="bgclr-dk-sp0 mb20 headerCoster">
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="{ path: '/mainPage/welcome' }"
                        >首页</el-breadcrumb-item
                    >
                    <el-breadcrumb-item>统计分析</el-breadcrumb-item>
                    <el-breadcrumb-item
                        ><span class="main-Clr-ft"
                            >图表看板</span
                        ></el-breadcrumb-item
                    >
                </el-breadcrumb>
      </el-header>
      <div class="pl20 pr20">
        <el-card class="mb20 cardWidth">
          <!-- 开始日期：
          <el-date-picker text="wws" v-model="leftDate" type="date" placeholder="开始日期" @change="draw()" style="padding-right:10px" />
          结束日期：
          <el-date-picker v-model="rightDate" type="date" placeholder="截至日期" @change="draw()" style="padding-right:10px"/> -->
          <!-- 主题：
          <el-select v-model="theme" placeholder="选择主题" size="large" @change="draw()">
            <el-option v-for="item in Object.keys(themes)" :key="item" :label="item" :value="item" />
          </el-select> -->
          日期：
          <el-date-picker
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            v-model="value7"
            type="daterange"
            align="left"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions2"
            @change="draw()">
          </el-date-picker>
        </el-card>
      </div>
   
    <el-main>
      <div class="grid">
        <div v-for="x in chartNumber" ref="chart" class="chart"></div>
      </div>
    </el-main>
  </div>
</template>

<style>
.grid {
  display: grid;
  grid-template-columns: 33% 33% 33%;
  width: 100%;
}

.chart {
  display: inline-block;
  border: solid #DADADA 1px;
  margin: 10px;
  height: 520px;
}
</style>

<script>
import drawImage from '../../../util/drawImage.js'
import http from '../../../util/http.js'
import config from '../../../config/draw.json'
import themes from '../../../../resources/config/echarts_theme/theme.json'

export default {
  data() {
    return {
      chartNumber: config.config.length,
      leftDate: "",
      rightDate: "",
      theme: 'customed',
      themes: themes,
      charts: [],
      pickerOptions2: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }] 
        },
        value7:'',
        defaultDate:true
    }
  },
  mounted() {
    this.getDefaultTime();
    this.draw(this.defaultDate); 
  },
  methods: {
    // yyyy-MM-dd
    formatDate(value) { // 时间戳转换日期格式方法
      if (value == null) {
        return ''
      } else {
        const date = new Date(value)
        const y = date.getFullYear()// 年
        let MM = date.getMonth() + 1 // 月
        MM = MM < 10 ? ('0' + MM) : MM
        let d = date.getDate() // 日
        d = d < 10 ? ('0' + d) : d
        return y + '-' + MM + '-' + d
      }
    },
    //默认选中最近一周时间
    getDefaultTime () {
      const end = new Date();
      const start = new Date();
      console.log(start.setTime(start.getTime() - 3600 * 1000 * 24 * 7));
      this.value7 = [start, end]
    },
    async draw(defaultDate) {
      if(defaultDate == true) {
        this.leftDate = this.formatDate(this.value7[0].getTime());
        this.rightDate = this.formatDate(this.value7[1].getTime());
      }else {
        this.leftDate = this.value7[0];
        this.rightDate = this.value7[1];
      }
      this.defaultDate = false;
      let headers = new Headers()
      headers.append('Content-Type', 'application/json')
      const req = []
      config.config.forEach(item => {
        req.push(http(item.url, 'post', headers, JSON.stringify({ leftDate: this.leftDate, rightDate: this.rightDate })))
      })
      const res = await Promise.all(req)
      drawImage(res, config.config, this)
    }
  }
}
</script>

<style scoped>
    .chart{
      height: 300px;
    }
</style>